<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .container {
            width: 600px;
            height: 400px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        
        .container .wrap {
            position: absolute;
            width: 4200px;
            z-index: 1;
        }
        
        .container .wrap img {
            width: 600px;
            height: 400px;
            float: left;
            left: 0px;
            z-index: 1;
        }
        
        .container .buttons {
            position: absolute;
            right: 20px;
            bottom: 20px;
            z-index: 2;
        }
        
        .container .buttons span {
            width: 20px;
            height: 20px;
            line-height: 20px;
            margin-left: 15px;
            display: inline-block;
            text-align: center;
            background: green;
            color: white;
            cursor: pointer;
            border-radius: 50%;
        }
        
        .container .arrow {
            position: absolute;
            display: none;
            top: 50%;
            margin-top: -30px;
            height: 60px;
            line-height: 60px;
            color: white;
            text-align: center;
            background-color: black;
            opacity: 0.5;
            font-size: 50px;
            z-index: 2;
        }
        
        .container:hover .arrow {
            display: block;
        }
        
        .container .arrow_right {
            right: 0;
        }
        
        .container .arrow_left {
            left: 0;
        }
    </style>

</head>

<body>
    <div class="container">
        <div class="wrap">
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
            <img src="images/5.jpg" alt="">
            <img src="images/6.jpg" alt="">
            <img src="images/7.jpg" alt="">
        </div>
        <div class="buttons">

        </div>
        <a href="javascript:;" class="arrow arrow_left">&lt;</a>
        <a href="javascript:;" class="arrow arrow_right">&gt;</a>


    </div>
    <script>
        let container = document.getElementsByClassName("container")[0];
        let wrap = document.getElementsByClassName("wrap")[0];
        let imgs = wrap.getElementsByTagName("img");
        let next = document.getElementsByClassName("arrow_right")[0];
        let prev = document.getElementsByClassName("arrow_left")[0];
        let buttons = document.getElementsByClassName("buttons")[0];
        let dots = buttons.getElementsByTagName("span");
        let boxWidth = imgs[0].offsetWidth;
        let imgCount = imgs.length;
        let index = 0;
        let timer = null;
        //动态创建圆点
        for (let i = 0; i < imgCount; i++) {
            let span = document.createElement("span");
            span.innerText = i + 1;
            buttons.appendChild(span);
        }
        next.onclick = function() {
            nextPic();
        }
        prev.onclick = function() {

            prevPic();
        }

        function nextPic() {
            if (wrap.offsetLeft <= -boxWidth * (imgCount - 1)) {
                wrap.style.left = "0px"
            } else {
                wrap.style.left = parseInt(wrap.offsetLeft) - boxWidth + "px";
            }
            index++;
            showCurrentDot()
        }

        function prevPic() {
            if (wrap.offsetLeft >= 0) {
                wrap.style.left = -boxWidth * (imgCount - 1) + "px"
            } else {
                wrap.style.left = parseInt(wrap.offsetLeft) + boxWidth + "px";
            }
            index--;
            showCurrentDot()

        }

        function autoPlay() {
            timer = setInterval(function() {
                nextPic();
            }, 1000);
        }
        autoPlay();

        container.onmouseover = function() {
            clearInterval(timer);
        }
        container.onmouseout = function() {
            autoPlay();
        }
        console.log(dots.length)

        function showCurrentDot() {
            if (index > imgCount - 1) {
                index = 0;
            } else if (index < 0) {
                index = imgCount - 1;
            }
            for (let i = 0; i < dots.length; i++) {
                dots[i].style.backgroundColor = "green";
            }
            dots[index].style.backgroundColor = "red";
        }
        buttons.onclick = function(event) {
            let ev = event || window.event;
            let target = ev.target || ev.srcElement;
            index = parseInt(target.innerText) - 1;
            wrap.style.left = -index * boxWidth + "px";
            showCurrentDot();
        }
    </script>

</body>

</html>